import { Link } from 'react-router-dom';
import { ArrowRightIcon } from 'lucide-react';
import ImageLoader from '../UI/ImageLoader';
const FeaturedArticles = () => {
  const articles = [{
    id: 'sony-wh1000xm5',
    title: 'Sony WH-1000XM5: The New King of ANC Headphones?',
    excerpt: 'Our in-depth analysis of Sony, latest, flagship, noise cancelling headphones, reveals impressive improvements.',
    image: 'https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80',
    category: 'Audio Sanctuary',
    featured: true
  }, {
    id: 'macbook-m2-pro',
    title: 'Apple M2 Pro MacBook: Performance That Redefines Mobile Computing',
    excerpt: 'We pushed Apple silicon to its limits through our comprehensive benchmark suite.',
    image: 'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1026&q=80',
    category: 'Compute Core',
    featured: true
  }, {
    id: 'samsung-s23-ultra',
    title: 'Samsung Galaxy S23 Ultra: Computational Photography Mastery',
    excerpt: 'Samsung flagship smartphone camera system sets new standards for mobile photography.',
    image: 'https://images.unsplash.com/photo-1610945415295-d9bbf067e59c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    category: 'Mobile Nexus',
    featured: false
  }];
  return <div className="py-16">
      <div className="flex justify-between items-center mb-8">
        <h2 className="text-2xl md:text-3xl font-bold font-display">
          Latest Highlights
        </h2>
        <Link to="/reviews" className="flex items-center text-[#4361ee] hover:text-[#06d6a0] transition-colors">
          <span className="mr-2 text-sm">View all reviews</span>
          <ArrowRightIcon size={16} />
        </Link>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {articles.map((article, index) => <Link key={article.id} to={`/review/${article.id}`} className={`group relative overflow-hidden rounded-lg ${index === 0 ? 'md:col-span-2 md:row-span-2' : ''}`}>
            <div className={`relative ${index === 0 ? 'aspect-[16/9] md:aspect-[16/10]' : 'aspect-[16/9]'}`}>
              <ImageLoader src={article.image} alt={article.title} className="absolute inset-0 w-full h-full" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
              <div className="absolute bottom-0 left-0 right-0 p-6">
                <span className="inline-block px-3 py-1 rounded-full bg-[#151518]/80 text-xs font-medium text-[#4361ee] mb-3">
                  {article.category}
                </span>
                <h3 className={`font-display font-bold mb-2 group-hover:text-[#4361ee] transition-colors ${index === 0 ? 'text-xl md:text-2xl' : 'text-lg'}`}>
                  {article.title}
                </h3>
                {(index === 0 || window.innerWidth >= 768) && <p className="text-[#8a8f98] text-sm line-clamp-2">
                    {article.excerpt}
                  </p>}
              </div>
            </div>
          </Link>)}
      </div>
    </div>;
};
export default FeaturedArticles;